import 'package:flutter/material.dart';
import 'package:flutter_app/config/constant.dart';
import 'package:flutter_app/resources/pages/login/phonelogin_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:nylo_framework/nylo_framework.dart';
import '../../../bootstrap/helpers.dart';
import '/app/controllers/login_controller.dart';

class LoginPage extends NyPage<LoginController> {
  static String path = '/login';

  @override
  init() async {
    // To update the state,
    // use: refreshPage(setState: () { });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize:ScreenSize);
    Widget logoWidget = Container(
      margin: EdgeInsets.only(top: ScreenUtil().screenHeight * 1 / 4),
      child: Center(
        child: Column(
          children: [
            SvgPicture.asset("public/assets/images/login_icon.svg",
                width: 100.w, height: 80.h),
            SizedBox(
              height: 20.w,
            ),
            Text(
              "盲盒交友",
              style: TextStyle(
                  fontSize: 50.sp,
                  color: ThemeColor.get(context).background,
                  fontWeight: FontWeight.w900),
            )
          ],
        ),
      ),
    );
    Widget buttonWidget = Container(
      margin: EdgeInsets.only(bottom: ScreenUtil().screenHeight * 1 / 10),
      child: Center(
        child: Column(
          children: [
            InkWell(
              onTap: ()=>Navigator.pushNamed(context, PhoneloginPage.path ),
              child: Container(
                decoration: BoxDecoration(
                  // color: Colors.transparent,
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      ThemeColor.get(context).primaryBackgroundDeep,
                      ThemeColor.get(context).primaryBackgroundLight,
                    ],
                  ),
                  border: Border.all(
                    width: 4.w,
                    color: ThemeColor.get(context).primaryBackgroundDeep,
                  ),
                  borderRadius: BorderRadius.circular(50.sp), // 圆角半径
                ),
                width: 600.w,
                height: 96.h,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset("public/assets/images/phone_icon.svg",
                        width: 60.w, height: 40.h),
                    SizedBox(
                      width: 20.w,
                    ),
                    Text(
                      "手机号登录",
                      style: TextStyle(
                        fontSize: 32.sp,
                        color: ThemeColor.get(context).background,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(
              height: 30.w,
            ),
            InkWell(
              onTap: (){},
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  border: Border.all(
                    width: 4.w,
                    color: ThemeColor.get(context).primaryBackgroundDeep,
                  ),
                  borderRadius: BorderRadius.circular(50.sp), // 圆角半径
                ),
                width: 600.w,
                height: 96.h,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset("public/assets/images/weachat_icon.svg",
                        width: 60.w, height: 40.h),
                    SizedBox(
                      width: 20.w,
                    ),
                    Text(
                      "微信号登录",
                      style: TextStyle(
                        fontSize: 32.sp,
                        color: ThemeColor.get(context).background,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            SizedBox(
              height: 50.w,
            ),
            Text(
              "其他登录方式 >",
              style: TextStyle(
                  fontSize: 28.sp, color: ThemeColor.get(context).fontGrey),
            ),
            SizedBox(
              height: 50.w,
            ),
            GestureDetector(
              onTap: () {
                refreshPage(setState: () {
                  controller!.isChecked = !controller!.isChecked;
                });
              },
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    controller!.isChecked
                        ? Icon(
                            Icons.radio_button_checked_outlined,
                            size: 40.sp,
                            color:
                                ThemeColor.get(context).primaryBackgroundDeep,
                          )
                        : Icon(
                            Icons.circle_outlined,
                            size: 40.sp,
                            color: ThemeColor.get(context).background,
                          ),
                    SizedBox(
                      width: 10.w,
                    ),
                    Text('同意《用户协议》和《隐私协议》',
                        style: TextStyle(
                            color: ThemeColor.get(context).background,
                            fontSize: 28.sp)),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
    return Scaffold(
      resizeToAvoidBottomInset: false,
        body: Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("public/assets/images/login_bg.png"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [logoWidget, buttonWidget],
          ),
        )
      ],
    ));
  }
}
